<template>
  <DiscordPicker
    class="emoji"
    @gif="setGif"
    @emoji="setEmoji"
    :showEmoji="true"
    apiKey="380W3DK9DXYO"
  />
</template>

<script setup>
  import DiscordPicker from 'vue3-discordpicker'

  const emits = defineEmits(['setEmoji', 'setGif'])

  const setEmoji = (emoji) => {
    // content.value = content.value.context.concat(emoji)
    emits('setEmoji', emoji)
  }

  const setGif = (emoji) => {
    /**
     *  gif-format="md" 设置这个props需要转为格式
     * @type {string}
     */
    // let reg = /\[(.*)]/
    //转换为markdown识别模式
    // if (reg.test(emoji)) {
    //   emoji = `![](${RegExp.$1})`
    // }
    emoji = `![](${emoji})`
    // content.value = content.value.context.concat(emoji)
    emits('setGif', emoji)
  }

  // defineExpose({
  //   content
  // })
</script>

<style lang="scss" scoped>
  @media (max-width: 860px) {
    .emoji {
      margin-left: 200px !important;
      z-index: 1000 !important;
    }
  }
</style>
